<template>
  <div>
    <div class="panel-menu">
      <flexbox :gutter="0">
        <flexboxItem class="title vux-1px-b">
          人事部
        </flexboxItem>
      </flexbox>
      <flexbox :gutter="0">
        <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteAskLeave' }">
            <i class="icon icon-leave"></i>
            <p>请假申请</p>
          </router-link>
        </flexboxItem>
        <!-- 佔位，解決安卓某些機型兼容問題 -->
        <flexboxItem :span="4" class="item">
           <router-link :to="{ name: 'WriteHolLeave' }">
            <i class="icon icon-hol-leave"></i>
            <p>例假申请</p>
          </router-link>
        </flexboxItem>
        <!-- 佔位，解決安卓某些機型兼容問題 -->
        <flexboxItem :span="4" class="item"></flexboxItem>
      </flexbox>
    </div>
    <!-- <div class="panel-menu" v-if="this.loginUserInfo.IsBusiness === 'S'"> -->
    <div v-if="userInfo && (userInfo.IsBusiness === 'S' || userInfo.StaffNo === '2005113') || StaffNoArr.indexOf(userInfo.StaffNo)!==-1" class="panel-menu">
      <flexbox :gutter="0">
        <flexboxItem class="title vux-1px-b">
          营业部
        </flexboxItem>
      </flexbox>
      <flexbox :gutter="0" wrap="wrap">
        <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteContract' }">
            <i class="icon icon-contract"></i>
            <p>合同申请</p>
          </router-link>
        </flexboxItem>
        <!-- <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteRebate' }">
            <i class="icon icon-rebate"></i>
            <p>合作申請</p>
          </router-link>
        </flexboxItem> -->
        <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteSecret' }">
            <i class="icon icon-secrecy"></i>
            <p>保密申请</p>
          </router-link>
        </flexboxItem>
        <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteKey' }">
            <i class="icon icon-key"></i>
            <p>密钥申请</p>
          </router-link>
        </flexboxItem>
        <!-- 佔位，解決安卓某些機型兼容問題 -->
        <!-- <flexboxItem :span="4" class="item"></flexboxItem> -->
        <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteFDH' }">
            <i class="icon icon-fdh"></i>
            <p>付外佣申請</p>
          </router-link>
        </flexboxItem>
      </flexbox>
    </div>
    <!-- <div class="panel-menu">
      <flexbox :gutter="0">
        <flexboxItem class="title vux-1px-b">
          橫琴
        </flexboxItem>
      </flexbox>
      <flexbox :gutter="0">
        <flexboxItem :span="4" class="item">
          <router-link :to="{ name: 'WriteContract' }">
            <i class="icon icon-contract"></i>
            <p>合同申請</p>
          </router-link>
        </flexboxItem>
        <flexboxItem :span="4" class="item"></flexboxItem>
        <flexboxItem :span="4" class="item"></flexboxItem>
      </flexbox>
    </div> -->
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux';
  export default {
    name: 'PanelMenu',
    data(){
      return {
        StaffNoArr: [
          '1902784',
          '1903789',
          '2003040',
          '2004094',
          '2005112',
          '2010195',
          '2012204',
          '2101215'
        ],
        userInfo:null
      }
    },
    components: {
      Flexbox,
      FlexboxItem
    },
    created() {
      this.userInfo = this.getUserInfo() 
      // console.log('user信息', this.userInfo);
    }
  };
</script>

<style scoped lang="scss">
  @import '../../assets/style/variable';

  .panel-menu{
    margin: getRem(52) getRem(32) 0;
    background: #fff;
    border-radius: getRem(20);
    box-shadow: 0 0 getRem(19) getRem(3) rgba(83, 83, 83, 0.16);
    &+.panel-menu{
      margin-top: getRem(30);
    }
    .title{
      font-weight:bold;
      font-size: getRem(36);
      line-height: 1;
      padding: getRem(40) getRem(42) getRem(32);
      &:after{
        color: #e6e6e6;
      }
    }
    .item{
      a{
        font-size: getRem(32);
        color: #333;
        text-align:center;
      }
      p{
        line-height: 1;
        padding-bottom: getRem(38);
      }
      .icon{
        display: block;
        height: getRem(126);
      }
      .icon-rebate{
        background: url(../../assets/images/icon-rebate.png) no-repeat center getRem(38);
        background-size: getRem(70) getRem(66);
      }
       .icon-secrecy{
        background: url(../../assets/images/secrecy_icon@3x.png) no-repeat center getRem(38);
        background-size: getRem(70) ;
      }
      .icon-contract{
        background: url(../../assets/images/contract_icon@3x.png) no-repeat center getRem(38);
        background-size: getRem(70);
      }
      .icon-key{
        background: url(../../assets/images/secret-key_icon@3x.png) no-repeat center getRem(38);
        background-size: getRem(70);
      }
      .icon-leave{
        background: url(../../assets/images/icon-leave.png) no-repeat center getRem(38);
        background-size: getRem(61) getRem(66);
      }
      .icon-hol-leave {
        background: url(../../assets/images/icon-hol-leave@3x.png) no-repeat center getRem(38);
        background-size: getRem(61) getRem(66);
      }
      .icon-fdh {
        background: url(../../assets/images/icon-fdh.png) no-repeat center getRem(38);
        background-size: getRem(61) getRem(66);
      }
    }
  }
</style>
